<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Demo: Dools Ruler</title>
		<style type="text/css">
		@import "../resources/Widget.css";
		@import "../resources/Ruler.css";
	</style>
	
	<style type="text/css">
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/dijit.css";
		
		body {
	    background:#fff url("../../../dijit/tests/images/testsBodyBg.gif") repeat-x top left;
	    padding:2em 2em 2em 2em;
    }
    h1 {
    	font-size:2em;
  		margin:0 0 1em 0;
		}
    .plusIcon {
      background: transparent url(../../../dijit/tests/images/plus.gif) center center no-repeat;
    	width: 18px;
      height: 18px;
    }
	</style>

	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true"></script>
	<script type="text/javascript">
		var ruler;
		dojo.require("dools.widget.Ruler");
		dojo.addOnLoad(function(){
			ruler = new dools.widget.Ruler();
			
			dojo.connect(dojo.byId('show_btn'), "onclick", function(){
				ruler.show();
			});
			dojo.connect(dojo.byId('hide_btn'), "onclick", function(){
				ruler.hide();
			});
			dojo.connect(dojo.byId('toggle_btn'), "onclick", function(){
				ruler.toggle();
			});
			dojo.connect(dojo.byId('destroy_btn'), "onclick", function(){
				ruler.destroy();
			});
			
			dojo.connect(dojo.byId('create_btn'), "onclick", function(){
				ruler = new dools.widget.Ruler();
			});
		});
	</script>
</head>
<body>
	<h1>Demo: Dools Ruler</h1>
	<button id="show_btn">Show</button>
	<button id="hide_btn">Hide</button>
	<button id="toggle_btn">Toggle</button>
	<button id="create_btn">Create</button>
	<button id="destroy_btn">Destroy</button>
	
	<div style="width:300px; height: 350px; margin: -50px 0px 100px 500px; background: #6CB5DF;">
		<div style="width:260px; height: 200px; margin: 20px; background: #00F3F3;"></div>
	</div>
	<!-- Add in some of that kitchen sink style code  -->  
</body>
</html>
